<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue 生命周期</title>
    <script src="./vue.js"></script>
  </head>

  <body>
    <pre>
    1. 学习生命周期的意义：有助于理解 Vue 实例的运行方式、完成更复杂的功能、分析错误原因等

    2. 实例的生命周期：Vue 实例从被创建到挂载到页面中运行，再到不用时卸载、销毁的过程
    
    3. 钩子函数： 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，这些方法是 Vue 给提供的

    4. Vue 生命周期经过 3 个阶段： 创建、更新、销毁
  </pre
    >

    <div id="root">
      <div class="box">
        <h5>{{ msg }}</h5>
        <button @click="msg = 'Jerry'">更改数据</button>
      </div>
    </div>
    <!-- Vue 生命周期分为三个阶段：创建阶段、运行阶段、销毁阶段 -->

    <script>
      // 1. new Vue 开始创建 Vue 实例
      var vm = new Vue({
        el: '#root',
        data: {
          msg: 'Tom',
        },
        methods: {
          handle() {
            console.log('Jerry')
          },
        },
        beforeCreate() {
          // 在这个阶段，创建了一个空的 Vue 实例对象，这时候，只有钩子函数、以及默认的方法能够被调用
          // 注意：在这个阶段，是不能够访问 data 中的数据，以及自定义时间
          // console.log(this.msg)
          // this.handle()
          console.log('beforeCreate')
          console.log(this.el)
          console.log(this.data)
          console.log(
            'beforecreate阶段只有钩子函数和一些默认的方法可以调用，而且在这个阶段不能调用data里面的数据',
          )
        },
        created() {
          // ★★★★★
          // 在这个阶段，data 以及 methods 中的方法以及被初始化完成，这时候可以进行调用
          // 注意：在实际开发中，如果想最早的获取到后台返回的数据，也就是调用 ajax ，最早就应该在 created
          // console.log(this.msg)
          // this.handle()
          console.log('created')
          console.log(this.el)
          console.log(this.data)
          console.log(this.msg)
          console.log(this.handle())
          console.log(
            '在created阶段data和methods初始化完成，最早获取后台数据，就是在created阶段',
          )
        },
        beforeMount(e) {
          // 只需要知道，在这个阶段，Vue 在编译、解析模板即可
          // 在这个阶段， Vue 开始对模板进行编译，进行解析，将 数据 和 模板中使用的位置开始进行连接，
          // 在内存中生成一个模板字符串，生成一个 DOM 结构，但是需要注意： 是在内存中生成的，还没有渲染到浏览器中
          // console.log(document.querySelector('h5'))
          console.log(document.querySelector('.box'))
          console.log(
            '在这个阶段解析编译模板，数据和模板的对接，但是还没有渲染到页面',
          )
        },
        mounted() {
          //  ★★★★★
          // 到这个阶段，就已经把内存中生成的 DOM 替换到页面中，这时候就可以进行 DOM 操作
          // 操作 DOM 最早的位置就是在 mounted 中
          // 到这个阶段，Vue 创建阶段就已经完成了，到这个阶段， Vue 模板全部解析完毕，数据 和 模板完成结合，生成页面
          // console.log(document.querySelector('h5'))
          console.log(
            '在这个阶段vue已经完成解析，并渲染页面到视图，这个阶段开始操作的dom元素',
          )
        },
        beforeUpdate() {
          // 在这个钩子函数中， 页面中显示数据是旧的，但是 data 中数据是最新的，
          // 在这个阶段，vue 是监听到更新，在内存里面再次生成一份 虚拟的 DOM，但是这个虚拟的 DOM 还没有渲染到页面上
          // 所以页面数据是之前的，老的，但是数据是最新的
          // console.log(document.querySelector('h5'))
          // console.log(this.msg)
          console.log(
            '这个阶段vue已经监听到数据的改变，在内存中再生产一份虚拟dom，使用diff查找数据改变的地方',
          )
        },
        updated() {
          // 在这个阶段， 最新的数据以及和内存的 DOM 已经编译成功，替换到真正的 DOM
          console.log(document.querySelector('h5'))
          console.log(this.msg)
          console.log('完成更新动作')
        },
      })
    </script>
  </body>
</html>
